<script lang="ts">
import navi from "@/components/AdminNavi.vue";
import {onMounted, ref} from "vue";
import request from "@/utils/request";

export default {
  components:{
    'navi':navi
  },
  setup(){
    const list=ref([])
    const custId=ref("")
    const total=ref("")
    const params = ref({
      page: 1,
      size: 10
    })

    onMounted(()=>{
      getCustId()
      pagehelper()

    })

    const pagehelper=async()=>{
      const res=await request(`/user/adminUser/${custId.value}/${params.value.page}/${params.value.size}`)
      console.log(res.data)
      list.value=res.data.data.records
      total.value =res.data.data.total
    }
    const getCustId = () =>{
      let item = localStorage.getItem("custId");
      try {
        custId.value = item ? JSON.parse(item) : null;
      } catch (error) {
        console.error('Error parsing JSON:', error);
      }
    }
    const handleSizeChange = (val: number) => {
      console.log(`每页 ${val} 条`)
      params.value.size = val
      pagehelper()
    }

    const handleCurrentChange = (val: number) => {
      console.log(`当前页: ${val}`)
      params.value.page = val
      pagehelper()
    }

    const changeSwitch = (row:any) => {
      console.log(row.status)
      if(row.status==='user') {
        const res = request.get(`/user/changePower/${row.custId}/user`)
        console.log(res)
      }
      else if(row.status==='admin') {
        const res = request.get(`/user/changePower/${row.custId}/admin`)
        console.log(res)
      }
      else{
        console.log("error")
      }
    }




  return{
    list,
    params,
    handleCurrentChange,
    handleSizeChange,
    total,
    changeSwitch
  }
  }

}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px"><navi/></el-aside>
      <el-main>
        <el-table :data="list" border style="width: 100%;margin-top: 50px" >
          <el-table-column label="用户名" prop="custName" width="200px"/>
          <el-table-column label="账号" prop="custAccount" width="250px"/>
          <el-table-column label="联系方式" prop="custTel" width="250px"/>
          <el-table-column label="地址" prop="custAddress"/>
          <el-table-column label="权限" prop="status">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.status"
                  active-value="admin"
                  inactive-value="user"
                  size="small"
                  active-text="admin"
                  inactive-text="user"
                  @change="changeSwitch(scope.row)"
              />

            </template>
          </el-table-column>
        </el-table>

        <el-pagination class="page"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="this.params.page"
                       :page-sizes="10"
                       :page-size="this.params.size"
                       layout=" prev, pager, next, jumper"
                       :total="this.total">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.page{
  position: fixed;
  bottom:180px;
}
</style>